import React, { useState, useEffect } from 'react';
import { Card, Button, Input, Table } from 'antd';
import styles from './index.less';

import { dcData } from '@/utils/exportData';
import api from '@/api';

const Details = (props: any) => {
  const [phone, setPhone] = useState('');
  const [pagination, setPagination] = useState({
    page: 1,
    pageSize: 10,
    total: 0,
  });
  const [tabLoading, setTabLoading] = useState<boolean>(false);
  const [loadBtn, setLoadBtn] = useState<boolean>(false);
  const [dataSource, setDataSource] = useState([]);
  const columns: any = [
    {
      title: '手机号',
      key: 'phone',
      dataIndex: 'phone',
    },
    {
      title: '用户ID',
      key: 'id',
      dataIndex: 'id',
    },
    {
      title: '数量',
      key: 'amount',
      dataIndex: 'amount',
    },
    {
      title: '开始日期',
      key: 'createTime',
      dataIndex: 'createTime',
    },
  ];
  // 切换页面
  const onChangePage = (value: any) => {
    const newPagination = { ...pagination };
    newPagination['page'] = value.current;
    newPagination['pageSize'] = value.pageSize;
    setPagination(
      Object.assign(pagination, {
        ...newPagination,
      }),
    );
    fetchData({
      phone,
      page: value.current,
      pageSize: value.pageSize,
    });
  };
  useEffect(() => {
    fetchData({
      phone,
      page: 1,
      pageSize: 10,
    });
  }, []);
  // 导出数据
  const exportData = () => {
    if (loadBtn) return;
    setLoadBtn(true);
    api.user
      .server_user_list({
        pageNum: pagination.page,
        pageSize: pagination.pageSize,
        phone,
      })
      .then(res => {
        const { notesDetailList } = res;
        const len = columns.length;
        dcData(notesDetailList, columns.splice(0, len - 1), '明细列表');
      })
      .finally(() => {
        setLoadBtn(false);
      });
  };
  // 获取列表数据
  const fetchData = (params: any) => {
    if (tabLoading) return;
    setTabLoading(true);
    api.note
      .server_notes_detail_page({
        pageNum: params.page,
        pageSize: params.pageSize,
        phone,
      })
      .then(res => {
        setDataSource(res?.notesDetailList || []);
        setPagination(Object.assign(pagination, { total: res?.total || 0 }));
      })
      .finally(() => {
        setTabLoading(false);
      });
  };
  return (
    <div>
      <div className={styles.title}>{props.route.title}</div>
      <Card bordered={false}>
        <div className={styles.heade}>
          <div className={styles.searchHead}>
            <Input
              className={styles.formItem}
              value={phone}
              onChange={(e: any) => setPhone(e.target.value)}
              placeholder="请输入手机号"
            ></Input>
            <Button
              className={styles.searchBtn}
              type="primary"
              onClick={() => {
                fetchData({
                  phone,
                  page: 1,
                  pageSize: 10,
                });
              }}
            >
              搜索
            </Button>
          </div>
          <Button
            type="primary"
            className={styles.addBtn}
            loading={loadBtn}
            onClick={exportData}
          >
            导出
          </Button>
        </div>
        <Table
          rowKey="id"
          loading={tabLoading}
          dataSource={dataSource}
          columns={columns}
          pagination={{
            current: pagination.page,
            pageSize: pagination.pageSize,
            pageSizeOptions: ['10', '20', '40'],
            total: pagination.total,
            showSizeChanger: true,
          }}
          onChange={onChangePage}
        />
      </Card>
    </div>
  );
};

export default Details;
